<template>
    <div class="app-container" v-cloak>
        <levelbar></levelbar>
        <el-form label-width="110px" class="app-content" :rules="rules" :model="ruleForm" ref="ruleForm">
            <div class="box">
                <div class="appTitle">修改学校</div>
                <div class="appTop">学校信息</div>
                <el-row :gutter="21">
                    <el-col :span="12">
                        <el-form-item label="学校级别" prop="schoolLevel">
                            <el-select v-model="ruleForm.schoolLevel" placeholder="请选择" style="width:95%" >
                                <el-option v-for="item in dataNewId" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="ruleForm.schoolLevel=='1'">
                        <el-form-item label="父校名称" prop="headSchoolName">
                            <headerSchool v-model="ruleForm.headSchoolName" :fxSchoolId="ruleForm.schoolId" style="width:95%" @change='schoolChange' ></headerSchool>
                        </el-form-item>    
                    </el-col>
                </el-row>
                <el-row :gutter="21">
                    <el-col :span="12">
                        <el-form-item label="学校名称" prop="schoolName">
                           <el-popover placement="top-start" trigger="focus" content="字符长度不大于20个">
                                <el-input v-model="ruleForm.schoolName" placeholder="请输入学校名字" :maxlength="20" style="width:95%" slot="reference"></el-input>
                           </el-popover>     
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="详细地址" prop="schoolAddress">
                           <el-popover placement="top-start" trigger="focus" content="字符长度不大于30个">
                                <el-input v-model="ruleForm.schoolAddress" placeholder="请输入学校地址" :maxlength="30" style="width:95%" slot="reference"></el-input>
                           </el-popover>     
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="21">
                    <el-col :span="7">
                        <el-form-item  label="是否培训机构：">
                            <span v-if="ruleForm.isOrganId=='1'">是</span>
                            <span v-if="ruleForm.isOrganId=='0'">否</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7" :offset="1" v-if="ruleForm.isOrganId=='0'">
                        <el-form-item label="学校类型：">
                            <span>{{ruleForm.typeName}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="1" v-if="ruleForm.isOrganId=='0'">
                        <el-form-item label="学年制：">
                            <span>{{ruleForm.yearStstemIdName}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="21">
                    <el-col :span="8">
                       <el-form-item label="所属省" prop="fProvinceId">
                            <province v-model="ruleForm.fProvinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属市" prop="fCityId">
                            <city v-model="ruleForm.fCityId" :province="ruleForm.fProvinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属区县" prop="fAreaId">
                            <region v-model="ruleForm.fAreaId" :city="ruleForm.fCityId" style="width:91.5%"></region>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="footer">
                <el-button @click="resetForm">取消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')" :loading="loadingBtn">确认</el-button>
            </div>
        </el-form>
    </div>
</template>
 
<script>
import Levelbar from '../layout/Levelbar';
import { updateSchool, getSchool} from 'api/schoolManage';
import { queryAllProvince, queryAllCityByProvinceId, queryAllAreaByCityId } from 'api/common';
import { mapGetters } from 'vuex';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import headerSchool from 'components/SchoolClasss/headerSchool';
export default{
    name: 'modifySchool',
    components: {Levelbar, province, city, region, headerSchool},
    data() {
        var judgeSchoolName = (rule, value, callback) => {
            if (value =='') {
                callback(new Error('请输入总校名称'));
            } else if (this.ruleForm.headSchoolId=='') {
                callback(new Error('该校不存在或非本账号创建'));
            } else {
                callback();
            }
        };
        return {
            dataNewId: [
                {
                    name: '总校',
                    id: '0'
                },
                {
                    name: '分校',
                    id: '1'
                }
            ],
            schoolLoading: false,
            loadingBtn: false,
            ruleForm: {
                fProvinceId: '',
                fAreaId: '',
                fCityId: '',
                typeName: '',
                yearStstemIdName: '',
                schoolId: '',
                province: [],
                findCity: [],
                findArea: [],
                schoolLevel: '0',
                headSchoolId: '',
                headSchoolName: '',
                schoolAddress: '',
                isOrganId: '',
                typeSchoolId: '',
                yearStstemId: '',
                yearStstem: [],
                isProvice: '',
                isYearStstemId: '',
                schoolNameList: [],
                sName: '',
                loadingBtn: false,
                isOrgan: [
                    {
                        value: '1',
                        name: '是'
                    },
                    {
                        value: '0',
                        name: '否'
                    }
                ]
            },
            rules: {
                schoolLevel: [
                    {required: true, message: '请选择学校级别', trigger: 'blur'}
                ],
                headSchoolName: [
                    { required: true, validator: judgeSchoolName }
                ],
                schoolName: [
                    { required: true, message: '请输入学校名字', trigger: 'blur' },
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'}
                ],
                schoolType: [
                    { required: true, message: '请选择学校类型', trigger: 'blur'}
                ],
                isOrganId: [
                    { required: true, message: '请选择是否培训机构', trigger: 'change' }
                ],
                fProvinceId: [
                    { required: true, message: '所属省不能为空', trigger: 'change' }
                ],
                fCityId: [
                    { required: true, message: '所属市不能为空', trigger: 'change' }
                ],
                fAreaId: [
                    { required: true, message: '所属区不能为空', trigger: 'change' }
                ],
                typeSchoolId: [
                    { required: true, message: '请选择学校类型', trigger: 'change' }
                ],
                yearStstemId: [
                    { required: true, message: '请选择学年制', trigger: 'change' }
                ],
                schoolAddress: [
                    { required: true, message: '请输入学校地址', trigger: 'blur' }
                ]
 
            }
        }
    },
    created() {
        this.searchProvice();
    },
    computed: {
        ...mapGetters([
            'uid'
        ])
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$confirm('确定要提交吗?', ' ', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(() => {
                        this.loadingBtn = true;
                        updateSchool(
                    this.$route.params.pId,
                    this.ruleForm.schoolLevel,
                    this.ruleForm.schoolName,
                    this.ruleForm.headSchoolId,
                    this.ruleForm.fProvinceId,
                    this.ruleForm.fCityId,
                    this.ruleForm.fAreaId,
                    this.ruleForm.schoolAddress,
                    ).then(response => {
                        this.$message({
                            type: 'success',
                            message: response.data.errorMsg
                        });
                        this.$store.dispatch('UpdateCache', true);// 修改 和查看
                        this.$router.push({path: '/schoolManage'});
                    }).catch(() => {
                        this.loadingBtn = false;
                    });
                    })
                }
            });
        },
    // 查询修改信息
        searchInfo() {
            getSchool(this.$route.params.pId).then(response => {
                this.ruleForm.schoolId = response.data.content.pId
                this.ruleForm.schoolName = response.data.content.sName;
                this.ruleForm.isOrganId = response.data.content.sType;
                this.ruleForm.schoolLevel = response.data.content.sLevel;
                if (this.ruleForm.schoolLevel=='1') {
                    this.ruleForm.headSchoolName = response.data.content.parentName;
                } else {
                    this.ruleForm.headSchoolName = '';
                }
                this.ruleForm.fProvinceId = response.data.content.fProvinceId;
                this.ruleForm.fCityId = response.data.content.fCityId;
                this.ruleForm.fAreaId = response.data.content.fAreaId;
                this.ruleForm.schoolAddress = response.data.content.sAddress;
                this.ruleForm.typeSchoolId = response.data.content.fPeriodId;
                this.isYearStstemId = response.data.content.sYear;
                this.ruleForm.headSchoolId = response.data.content.fParentId===null ? '' :response.data.content.fParentId;
                this.ruleForm.pId = response.data.content.fParentId;
                this.ruleForm.typeName = response.data.content.sPeriodName;
                this.ruleForm.yearStstemIdName = response.data.content.sYear;
                this.isProvice = '1';// 判断省市区是否加载完毕
            });
        },
    // 省市区选择
        searchProvice() {
            queryAllProvince().then(response => {
                let findProvice = response.data.content;
                let select = {
                    provinceName: '请选择',
                    provinceId: ''
                }
                findProvice.unshift(select);
                this.ruleForm.province = findProvice;
                this.ruleForm.fProvinceId = findProvice[0].provinceId;
            }).then(response => {
                this.searchInfo();
            });
        },
        changeProvice(a) {
            if (this.isProvice == '') {
                this.ruleForm.findCity = [];
                this.ruleForm.findArea = [];
                this.ruleForm.fCityId = '';
                this.ruleForm.fAreaId = '';
            }
            if (a=='') {
                return;
            }
            queryAllCityByProvinceId(a).then(response => {
                let findCity = response.data.content;
                let select = {
                    cityName: '请选择',
                    cityId: ''
                }
                findCity.unshift(select);
                this.ruleForm.findCity = findCity;
    
            });
        },
        changeCityId(a) {
            if (this.isProvice == '') {
                this.ruleForm.findArea = [];
                this.ruleForm.fAreaId = '';
                this.isProvice = '1';
            }
            if (a=='') {
                return;
            }
            queryAllAreaByCityId(a).then(response => {
                let findArea = response.data.content;
                let select = {
                    areaName: '请选择',
                    areaId: ''
                }
                findArea.unshift(select);
                this.ruleForm.findArea = findArea;
            });
        },
    // 模糊查询父校名称
        schoolChange(val) {
            this.ruleForm.headSchoolId = val
        },
    // 跳转
        resetForm() {
            this.$router.push({path: '/schoolManage'});  
        }  
    
    }
}
</script>
 
<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .app-levelbar {
        height: 35px;
    }
    .el-form{
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        background:#fff;
        padding-bottom:100px;
        .appTop{
            position: relative;
            font-size: 14px;
            color: rgb(106, 85, 72);
            padding-left: 16px;
            margin: 30px 0;
            display: block;
            &::after {
                position: absolute;
                content:'';
                width: 4px;
                height: 14px;
                background: #ff5e2c;
                left: 0;
                top: 3px;
            }
        }
        .el-form-item{
            margin-top:8px;
        }
        .appTitle{
            padding-top:8px;
            text-align: center;
            font-size: 18px;
            color: #333;
            line-height: 72px;
            font-weight: bold;
            font-family: Microsoft YaHei;
            border-bottom: 1px solid #ddd;
        }
        .box{
            padding: 0px 50px 0;
            background:#fff;
            margin-left:10px;
        }
        .footer {
          //float: right;
          text-align: center;
          margin-top: 60px;
        }
    }
    
}
 
</style>